<template>
  <view class="main">
    <view class="back"></view>

    <view class="header"
          ref="header"
    >
      <view :style="{height: statusBarHeight + 'px'}"></view>
      <view class="header-title">荣誉搜索</view>
    </view>

    <view :style="{height: statusBarHeight + 'px'}"></view>
    <view style="height: 44px"></view>
    <sx-dropdown-menu :filter-data="menuNormal"  @confirm="confirm" @menuNameChange="menuNameChange" @expose-method="exposeMethod" :current="currentMenu">
      <template slot="year">
        <view class="box">
          <view class="title">入职年份</view>
          <USlider v-model="year" :showValue="true" step="1"  min="1" max="50"   @click="exposeMethod"
                   activeColor="#0b8d80" inactiveColor="#c0c4cc" ></USlider>
        </view>

      </template>
    </sx-dropdown-menu>

    <u-tabs
        :list="tableList"
        :current="currentTab"
        lineColor="#0B8D80"
        :activeStyle="{
            color: '#0B8D80',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#d2d2d2',
            transform: 'scale(1)'
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;width :60px"
        @click="changeTab"

    >
    </u-tabs>
    <scroll-view
        scroll-y
        style="height: calc(100vh - 120px - 44px - 44px - 20px)"
    >
      <view class="box">
        <view class="box-title">可以申请技能等级</view>
        <view class="split-height"></view>
        <view>
          <u-grid col="3">
            <u-grid-item
                @click="goToSkillDetail(item.id)"
                v-for="(item, index) in selectBodyData.skillLevels"
            >
              <view class="in-box" >
                <view>
                  <image
                      :src="$kt.file.visit(item.fileIdOfIcon)"
                      mode="aspectFit"
                      class="box-icon"
                  ></image>
                </view>
                <view class="box-text">{{ item.name }}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
        <view v-show="selectBodyData.skillLevels.length == 0" style="text-align: center">
          <image src="@/static/noLevel.png" style="width: 100rpx;height: 110rpx"></image>
          <view style="font-size: 28rpx">暂无等级信息</view>
        </view>
      </view>

      <view class="box">
        <view class="box-title">可以申请职称等级</view>
        <view class="split-height"></view>
        <view>
          <u-grid col="3">
            <u-grid-item
                @click="goToTitleDetail(item.id)"
                v-for="(item, index) in selectBodyData.titleLevels"
            >
              <view class="in-box" >
                <view>
                  <image
                      :src="$kt.file.visit(item.fileIdOfIcon)"
                      mode="aspectFit"
                      class="box-icon"
                  ></image>
                </view>
                <view class="box-text">{{ item.name }}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
        <view v-show="selectBodyData.titleLevels.length == 0" style="text-align: center">
          <image src="@/static/noLevel.png" style="width: 100rpx;height: 110rpx"></image>
          <view style="font-size: 28rpx">暂无等级信息</view>
        </view>
      </view>

      <view class="box">
        <view class="box-title">可以申请人才等级</view>
        <view class="split-height"></view>
        <view>
          <u-grid col="3">
            <u-grid-item
                @click="goToTalentDetail(item.id)"
                v-for="(item, index) in selectBodyData.expertTalentLevels"
            >
              <view class="in-box" >
                <view>
                  <image
                      :src="$kt.file.visit(item.fileIdOfIcon)"
                      mode="aspectFit"
                      class="box-icon"
                  ></image>
                </view>
                <view class="box-text">{{ item.name }}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
        <view v-show="selectBodyData.expertTalentLevels.length == 0" style="text-align: center">
          <image src="@/static/noLevel.png" style="width: 100rpx;height: 110rpx"></image>
          <view style="font-size: 28rpx">暂无等级信息</view>
        </view>

      </view>
    </scroll-view>


  </view>
</template>

<script>
import UviewUi from "../../../uni_modules/uview-ui/components/uview-ui/uview-ui.vue";
import URow from "../../../uni_modules/uview-ui/components/u-row/u-row.vue";
import UCol from "../../../uni_modules/uview-ui/components/u-col/u-col.vue";
import UImage from "../../../uni_modules/uview-ui/components/u--image/u--image.vue";
import USlider from "../../../uni_modules/uview-ui/components/u-slider/u-slider.vue";

export default {
  components: {USlider, UImage, UCol, URow, UviewUi},
  data() {
    return {
      year: null,
      //默认选中默认
      currentMenu: 0,
      // 默认选中第一年
      currentTab: 0,
      // 状态栏高度
      statusBarHeight: 0,
      requestParam: {
        //学历
        educationLevel: null,
        //入职工作年份
        workYear: null
      },

      // 头部高度
      headerHeight: 0,
      bodyData: [
        {
          //年份
          year: null,
          //名称
          name: null,
          //技能等级
          skillLevels: [],
          //职称等级
          titleLevels: [],
          //人才等级
          expertTalentLevels: []
        }
      ],
      selectBodyData:  {
        //年份
        year: null,
        //名称
        name: null,
        //技能等级
        skillLevels: [],
        //职称等级
        titleLevels: [],
        //人才等级
        expertTalentLevels: []
      },
      tableList: [
        {
          name: "第1年"
        }
      ],
      current: 0,
      menuNormal: [
        // {
        //   name: "价格",
        //   type: "sort",
        //   submenu: [{
        //     submenu: [{
        //       name: "从低到高",
        //       value: "1",
        //     }, {
        //       name: "从高到低",
        //       value: "0",
        //     }]
        //   }]
        // }
        // 默认 学历 入职年份 筛选
        {
          name: "默认",
          type: "none",
        },
        {
          name: "学历",
          type: "hierarchy",
          submenu: [
            {
              name: "文盲",
              value: 1,
            },
            {
              name: "小学",
              value: 2,
            },
            {
              name: "初中",
              value: 3,
            },
            {
              name: "高中/中专",
              value: 4,
            },
            {
              name: "大专/高职",
              value: 5,
            },
            {
              name: "本科",
              value: 6,
            },
            {
              name: "硕士研究生",
              value: 7,
            },
            {
              name: "博士研究生",
              value: 8,
            }
          ]
        },
        {
          name: "入职年份",
          type: "year",
          current: 3
        },
        {
          name: '筛选',
          icon: 'settings',
          type: 'radio',
          submenu: [{
            "name": "学历",
            "submenu": [{
              "name": "文盲",
              "value": "1"
            }, {
              "name": "小学",
              "value": "2"
            }, {
              "name": "初中",
              "value": "3"
            }, {
              "name": "高中/中专",
              "value": "4"
            }, {
              "name": "大专/高职",
              "value": "5"
            }, {
              "name": "本科",
              "value": "6"
            }, {
              "name": "硕士研究生",
              "value": "7"
            }, {
              "name": "博士研究生",
              "value": "8"
            }]
          }
            , {
              name: "入职年份",
              type: "year",
              current: 3
            }
          ]
        }
      ],
      skillLevelList: [
        {
          id: 1,
          name: "初级",
          fileIdOfIcon: "569115734085637"
        },
        {
          id: 2,
          name: "中级",
          fileIdOfIcon: "569115734085637"
        },
        {
          id: 3,
          name: "高级",
          fileIdOfIcon: "569115734085637"
        },
        {
          id: 4,
          name: "特级",
          fileIdOfIcon: "569115734085637"
        }
      ],
    };
  },
  mounted() {
    // 设置状态颜色为白色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
    });
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取头部高度
    uni.createSelectorQuery().in(this).select('.header').boundingClientRect((data) => {
      this.headerHeight = data.height;
      this.getBodyData();
    }).exec();

  },
  methods: {
    /**
     * 跳转到技能详情
     */
    goToSkillDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/skillDetail/skillDetail?id=${id}`
      });
    },
    /**
     * 跳转到职称详情
     */
    goToTitleDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/title/title?id=${id}`
      });
    },
    /**
     * 跳转到专家人才详情
     */
    goToTalentDetail(id) {
      //uni 跳转详情页
      uni.navigateTo({
        url: `/pages/level/talent/talent?id=${id}`
      });
    },
    changeTab(e) {
      this.currentTab = e.index;
      this.selectBodyData = this.bodyData[e.index];
      console.log("this.selectBodyData",this.selectBodyData)
    },
    menuNameChange(method) {
      let name = '入职'+this.year+'年'
      method(2,name)
    },
    exposeMethod(method) {
      method()
    },
    getBodyData() {
      uni.showLoading({
        title: '加载中....'
      });
      this.requestParam.workYear = this.year;
      this.$requestSecurity({
        uri: "/honor/getHonor",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          this.tableList = [];
          this.bodyData.forEach(item => {
            this.tableList.push({name: item.name})
          });
          this.selectBodyData = res.data[0];
          console.log("this.selectBodyData",this.selectBodyData)
          uni.hideLoading();
        },
        stateFail: (res) => {
          uni.hideLoading();
        }
      });
    },
    confirm(e) {
      //遍历e.index 得到有数据的下标
      e.value.forEach((item,index) => {
        if (item.length > 0 && item[0] !=null) {
          if (index == 1){
            console.log("学历",item[0])
            this.requestParam.educationLevel = item[0]
          }
        }
      })
      console.log("this.requestParam",this.requestParam)
      this.getBodyData();
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .box {
  width: 100%;
  padding-top: 16px;
  flex-direction: column;

  .title {
    width: 100%;
    font-size: 13px;
    color: #888;
  }

  .labels {
    flex-direction: row;
    flex-wrap: wrap;

    .on {
      // border-color:  $uni-color-primary;
      background-color: #d7ebe9;
      color: $uni-color-primary;
      font-weight: 500;
    }

    > view {
      box-sizing: border-box;
      width: calc((698rpx - 30rpx * 3) / 4);
      height: 60upx;
      color: #3D3F42;
      background: #F4F4F5;
      border-radius: 8upx;
      border-radius: 2px;
      margin-right: 30rpx;
      margin-top: 8px;
      font-size: 12px;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}


.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  color: #ffffff;
  background: #0B8D80;

}

.user-info {
  height: 120px;
  padding: 20px 20px 50px 20px;
  background: linear-gradient(135deg, #0B8D80 0%, #1EC4B4 100%);
}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F5F5F5;
  top: 0;
  left: 0;
  z-index: -1;

}

.box {
  padding: 30rpx;
  box-sizing: border-box;
  text-align: center;
}

.main {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.bom {
  position: relative;
  top: -30px;
  padding: 20rpx;
  box-sizing: border-box;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #ffffff;
  height: calc(100vh - 120px - 44px - 44px - 20px);
}

.box-title {
  font-size: 24rpx;
  color: #333333;
  text-align: left;
  font-weight: bold;
}

.split-height {
  height: 20rpx;
}

.box-icon {
  width: 70rpx;
  height: 70rpx;
}

.box-text {
  font-size: 24rpx;
  color: #333333;
}

.in-box {
  background-color: #FFFFFF;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 20rpx 0;
  text-align: center;
}

.header-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
}

.flex-name {
  color: #ffffff;
}

.flex-box {
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-top: 20rpx;
}

.flex-unit {

}

.flex-text {
  margin-left: 10px;
}

.user-icon-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
</style>
